import React from "react";
import {
  HashRouter,
  Route,
  Switch,
  Link,
  BrowserRouter,
  Redirect,
} from "react-router-dom";
import Pc from '../system/index'
import { routers } from './routers'
// 如果使用browserRouter 不能直接输入路由跳转页面 只能事件或者组件link 而且不能写404页面
// 使用hashrouter 就可以直接输入 触发404的*全局匹配
// 如果进入了一个路由页面 那么路由页面里面的子路由又是全新的路由 和上一级路由没关系
// 前提是必须先进入第一级路由 然后触发二级路由才可以任意切换
function Log() {
  return (
    <div>
      <HashRouter>
        <Link to="/q">点击1</Link>
        <Switch>
          <Route
            exact
            path="/"
            component={() => {
              return 0;
            }}
          ></Route>
          <Route
            path="/a"
            component={() => {
              return 1;
            }}
          ></Route>
          <Route
            path="/b"
            component={() => {
              return 2;
            }}
          ></Route>
          <Route
            path="/q"
            component={() => {
              return <Shou></Shou>;
            }}
          ></Route>
          <Route path="*" component={() => { return '404' }} />
        </Switch>
      </HashRouter>
    </div>
  );
}
function Asp(props) {
  if (props.login) {
    return (
      <div>
        <HashRouter>
          <Switch>
            <Route
              path="/"
              render={() => {
                return <Log />;
              }}
            ></Route>
            <Redirect to="/" render={() => { return <Log /> }} />
          </Switch>
        </HashRouter>
      </div>
    );
  } else {
    return (
      <HashRouter>
        <Switch>
          {routers.map(res => {
            return <Route exact={res.extra} key={res.path} path={res.path} component={res.component}>
              {/* 如果写了内容就无法获取路由信息 */}
            </Route>
          })}
          {/* 404页面 */}
          <Route path="*" component={() => { return 404 }} />
        </Switch>
        {/* <Route exact path="/" component={Shou}></Route>
        <Route path="/deng" component={Deng}></Route>
        <Route path="/zhu" component={Zhu}></Route>
        <Route path="/shop" render={()=>{return <Shop name={'123'}/>}}></Route> */}
      </HashRouter>
    );
  }
}
class App extends React.PureComponent {
  constructor(props) {
    super(props);
  }
  render() {
    let pc = this.props.pc
    if (pc) {
      return (
        <div>
          <Asp login={false} />
        </div>
      );
    } else {
      return <div>pc管理
        <Pc />
      </div>
    }

  }
}
App.defaultProps = {
  pc: false
}
export default App;
